<template>
  <div class="card-table">
    <el-dialog
      :visible.sync="centerDialogVisible"
      width="45%"
      center
      :before-close="() => $emit('dialogQuxiao')"
    >
      <div class="header">
        <div
          style="
            margin-left: 11px;
            font-size: 17px;
            color: #22a1ff;
            font-weight: 500;
          "
        >
          {{ name }}工单
        </div>
      </div>
      <div class="main">
        <el-form
          size="small"
          :rules="rules"
          ref="form"
          :model="form"
          label-width="80px"
        >
          <el-form-item label="产品归属" prop="affiliation" class="items">
            <el-select
              style="width: 300px"
              v-model="form.affiliation"
              placeholder="请选择归属"
            >
              <el-option label="本厂" value="本厂"></el-option>
              <el-option label="客户" value="客户"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品类型" prop="mold" class="items">
            <el-select
              style="width: 300px"
              v-model="form.mold"
              placeholder="请选择产品类型"
            >
              <el-option label="电极" value="电极"></el-option>
              <el-option label="坩埚" value="坩埚"></el-option>
              <el-option label="接头" value="接头"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属库管" prop="controller" class="items">
            <el-select
              style="width: 300px"
              v-model="form.controller"
              placeholder="请选择所属库管"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in controllerData"
                :label="item"
                :key="index"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="产品工艺" prop="craft" class="items">
            <el-select
              style="width: 300px"
              v-model="form.craft"
              placeholder="请选择产品工艺"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in CraftData"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品直径" prop="diameter" class="items">
            <el-select
              style="width: 300px"
              v-model="form.diameter"
              placeholder="请选择产品直径"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in DiameterData"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品长度" prop="length" class="items">
            <el-select
              style="width: 300px"
              v-model="form.length"
              placeholder="请选择产品长度"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in LengthData"
                :key="index"
                :label="item.dates"
                :value="item.dates"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品型号" prop="whatModel" class="items">
            <el-select
              style="width: 300px"
              v-model="form.whatModel"
              placeholder="请选择产品型号"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in WhatModelData"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品状态" prop="status" class="items">
            <el-select
              style="width: 300px"
              v-model="form.status"
              placeholder="请选择产品状态"
            >
              <el-option label="一焙" value="一焙"></el-option>
              <el-option label="二焙" value="二焙"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="正次品" prop="goodOrBad" class="items">
            <el-select
              style="width: 300px"
              v-model="form.goodOrBad"
              placeholder="请选择正次品"
            >
              <el-option label="正品" value="正品"></el-option>
              <el-option label="次品" value="次品"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品数量" prop="number" class="items">
            <el-input
              style="width: 300px"
              v-model="form.number"
              placeholder="请填写产品数量"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark" class="items">
            <el-input
              style="width: 300px"
              v-model="form.remark"
              placeholder="请填写备注"
              type="textarea"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('dialogQuxiao'), (form = {})">取 消</el-button>
        <el-button type="primary" @click="resetForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { CraftgetAll, NewLIUZHUANcreateKc } from "@/api/stock/banlance3.js";
import { LengthgetAll } from "@/api/stock/totalListWorkOrder.js";
import { DiametergetAll } from "@/api/stock/diameter.js";
import { WhatModelgetAll } from "@/api/stock/whatmodel.js";
export default {
  components: {},
  props: ["dialogVisible", "names"],
  emits: ["dialogQuxiao"],
  data() {
    return {
      form: {},
      DiameterData: [],
      CraftData: [],
      LengthData: [],
      controllerData: [],
      WhatModelData: [],
      rules: {},
      centerDialogVisible: this.dialogVisible,
      name: this.names,
    };
  },

  computed: {},
  watch: {
    dialogVisible(n) {
      this.centerDialogVisible = n;
    },
    names(n) {
      this.name = n;
    },
  },
  created() {
    LengthgetAll().then((res) => {
      this.LengthData = res.data.data.pageData;
    });
    //获取工艺
    CraftgetAll().then((res) => {
      const pageData = res.data.data.pageData;
      pageData.forEach((element) => {
        console.log(element);
        this.CraftData.push(element.dates);
        this.controllerData.push(element.group);
      });
      let a = new Set(this.controllerData);
      this.controllerData = [...a];
    });
    //获取直径
    DiametergetAll().then((res) => {
      const pageData = res.data.data.pageData;
      pageData.forEach((element) => {
        this.DiameterData.push(element.dates);
      });
    });
    //获取类型
    WhatModelgetAll().then((res) => {
      const pageData = res.data.data.pageData;
      pageData.forEach((element) => {
        this.WhatModelData.push(element.dates);
      });
      console.log(this.WhatModelData);
    });
  },
  mounted() {},
  methods: {
    async resetForm() {
      this.form.number = parseFloat(this.form.number);
      console.log(this.form, 123);
      const { data } = await NewLIUZHUANcreateKc(this.form);
      console.log(data, 123);
      if (data.code == 200) {
        this.$message({
          type: "success",
          message: `${this.name}${data.message}`,
        });
      } else {
        this.$message({
          type: "error",
          message: `${this.name}${data.message}`,
        });
      }
      this.form = {};
      this.$emit("dialogQuxiao");
    },
  },
};
</script>

<style  scoped>
.card-table {
  padding: 0;
}
.header {
  display: flex;
  align-items: center;
  padding: 18px;
  border-bottom: thin solid rgb(223, 223, 223);
}
.main {
  width: 800px;
  padding: 20px;

  .items {
    display: inline-block;
  }
}
.footer {
  padding: 20px;
}
</style>
